<template>
      <nav>
        <div class="nav">
          <!-- rowone -->
          <div class="rowOne">
            <!-- logo -->
            <div class="logo">
              <img src="../../assets/img/indexHeader/1.png" alt="" width="197px">
            </div>
            <!-- search -->
            <div class="search">
              <input type="text" name="" @focus="inputFocus" v-model="inputVal" @blur="inputBlur">
              <img src="../../assets/img/indexHeader/2.png" alt="" @click="search">
            </div>
            <div class="call">
              <img src="../../assets/img/indexHeader/3.png" alt="">
              <span style="margin-left:10px;margin-right:2px">400-800-3683</span>
              <img src="../../assets/img/indexHeader/line.png" alt="" class="line">
              <span style="color:#595757;margin-left:6px;">全国免费咨询热线</span>
            </div>
          </div>
          <!-- rowtwo -->
          <div class="rowTwo">
            <!-- nav -->
            <ul style="margin-left: -30px;">
              <li v-for="(navs,index) in nav" :key="index" @mouseover="imgUrl(index)" @mouseout="imgUrlOut(index)">
                <a href="javascript:;" :class="{red:aIndex==index}" @click="headRoute(index)">
                  {{navs[0]}}</a><img :src="navs[1]">
                  <ul v-if="ulIndex==index">
                    <li v-for="(item,index) in navs[2]" :key="index" @mouseover="changeSonColor(index)" :class="{bgWhite:index==liIndex2}">
                        <a href="javascript:;" :class="{colorRed:index==liIndex2}" @click="headSonRoute(index)">{{item.name}}</a>
                    </li>
                  </ul>
              </li>
            </ul>
            <!-- buttongroup -->
            <div class="buttonGroup">
              <button v-for="(item,index) in btnName" @mouseover="btnMouseOver(index)" @click="rout(index)"
              :class="{red:index==btnIndex,black:index!=btnIndex}" :key="index">{{item.name}}</button>
            </div>
          </div>
        </div>
      </nav>
</template>
<script>
const url = require("../../assets/img/indexHeader/4-1.png");
const urlOne = require("../../assets/img/indexHeader/4.png");
export default {
  data() {
    return {
      // 行业方案列表
      result1: "",
      nav: [
        ["首页", "", [], []],
        [
          "媒体优选",
          url,
          [
            { name: "热销媒体" },
            { name: "APP矩阵" },
            { name: "DSP营销" },
            { name: "SEM营销" }
          ],
          [
            { src: "/view2/hotMedia" },
            { src: "/view2/appRect" },
            { src: "/view2/DSPSale" },
            { src: "/view2/SEMSale" }
          ]
        ],
        ["AI智投", "", [], []],
        ["行业方案", url, ["s", "b"], [], []],
        [
          "精选案例",
          url,
          [
            { name: "家居家电" },
            { name: "游戏教育" },
            { name: "汽车房产" },
            { name: "商超餐饮" },
            { name: "金融旅游" }
          ],
          [
            { src: "/jxaldetail", type: "家居家电" },
            { src: "/jxaldetail", type: "游戏教育" },
            { src: "/jxaldetail", type: "汽车房产" },
            { src: "/jxaldetail", type: "商超餐饮" },
            { src: "/jxaldetail", type: "金融旅游" }
          ]
        ],
        [
          "商务合作",
          url,
          [
            { name: "大客户服务" },
            { name: "代理合作" },
            { name: "关于我们" },
            { name: "媒体入驻" }
          ],
          [
            { scr: "/bigcustomer" },
            { src: "/agent" },
            { src: "/about" },
            { src: "/mediaIn" }
          ]
        ]
      ],
      titleP: true,
      focus: false,
      inputVal: "搜索媒体ID、账号或关键字",
      btnName: [{ name: "登录" }, { name: "收藏夹" }],
      path: ["/login", "/view2/ctrl"],
      headRouteVar: [
        "/",
        "/mediaSelect",
        "/ai",
        "/hyfaAll",
        "/jxal",
        "/swhzAll"
      ],
      headSonRouteVar: [],
      btnIndex: 1,
      liIndex: 1,
      liIndex2: 0,
      aIndex: 0,
      ulIndex: 9,
      args: {
        page: 1,
        limit: 10
      }
    };
  },
  methods: {
    search() {
      this.$router.push({ path: "/searchAll", query: { str: this.inputVal } });
    },
    inputFocus() {
      this.inputVal = "";
    },
    inputBlur() {
      if (this.inputVal === "") {
        this.inputVal = "搜索媒体ID、账号或关键字";
      }
    },
    btnMouseOver(index) {
      this.btnIndex = index;
    },
    // 头部路由大导航
    imgUrl(index) {
      for (let i = 0; i < this.nav.length; i++) {
        if (this.nav[i][1]) {
          this.nav[i][1] = url;
        }
      }
      this.aIndex = index;
      if (this.nav[index][1]) {
        this.nav[index].splice(1, 1, urlOne);
      }
      this.ulIndex = index;
    },
    changeSonColor(index) {
      this.liIndex2 = index;
    },
    headSonRoute(index) {
      this.$router.push({
        path: this.nav[this.aIndex][3][index].src,
        query: { type: this.nav[this.aIndex][3][index].type }
      });
    },
    // 头部路由大导航
    imgUrlOut(index) {
      for (let i = 0; i < this.nav.length; i++) {
        if (this.nav[i][1]) {
          this.nav[i].splice(1, 1, url);
        }
      }
      this.aIndex = 99;
      this.ulIndex = 99;
    },
    // 头部路由导航
    headRoute(index) {
      this.$router.push({ path: this.headRouteVar[index] });
    },
    // 登陆注册路由导航
    rout(index) {
      this.$router.push({ path: this.path[index] });
    }
  },
  mounted() {
    // 判断用户是否自动登陆和现在登陆
    if (
      window.localStorage.getItem("mobile") ||
      window.sessionStorage.getItem("userInfo")
    ) {
      this.btnName[0].name = "收藏夹";
      this.btnName[1].name = "个人中心";
      this.path[0] = "view2/ctrl";
      this.path[1] = "personal";
    }
    // 行业方案列表
    this.$ajax
      .post(this.Ipurl + "industryPlan/selectPage", this.args)
      .then(res => {
        this.result1 = res.data.dataInfo.records;
        // 替换nav数组中的数据
        this.nav[3][2] = this.result1;
        this.nav[3][3] = this.result1;
        // console.log(this.nav[3][3]);
      });
  }
};
</script>
<style scoped>
nav {
  width: 1200px;
  margin: 0 auto;
}
.nav {
  margin-top: 18px;
}
.rowOne {
  overflow: hidden;
}
.rowOne .logo {
  float: left;
}
.rowOne .search {
  position: relative;
  float: left;
}
.rowOne .call {
  float: right;
}
.search input {
  width: 403px;
  height: 35px;
  border: 1px solid #797778;
  border-top-left-radius:50px;
  border-top-right-radius:50px;
  border-bottom-right-radius:50px;
  border-bottom-left-radius:50px;
  /* padding-left: 20%; */
  margin-left: 200px;
  box-sizing: border-box;
  /* color: rgb(89, 87, 87); */
  color:#c6c6c6;
  font-size: 14px;
  text-align: center;
}
input::-webkit-input-placeholder{
             color:#c6c6c6;
        }
.search img {
  position: absolute;
  top: 8px;
  left: 567px;
}
.call img {
  float: left;
}
.call span:nth-child(2) {
  font-size: 24px;
  color: rgb(237, 64, 64);
  font-family: SimHei Regular;
  float: left;
  margin-left: 5px;
}
.call span:nth-child(3) {
  font-size: 14px;
  color: rgb(85, 85, 85);
  font-family: PingFang SC;
  float: left;
  margin-top: 3px;
  margin-left: 12px;
}
.rowTwo {
  margin-top: 10px;
  overflow: hidden;
}
.rowTwo a {
  font-size: 18px;
  color: rgb(34, 34, 34);
}
.rowTwo a.red {
  color: rgb(237, 64, 64);
}
.rowTwo > ul {
  float: left;
}
.rowTwo > ul > li {
  float: left;
  margin-left: 30px;
  padding: 30px 0;
}
.rowTwo > ul > li.bgWhite {
  background: #fff;
}
.rowTwo > ul > li > a.colorRed {
  color: #ee4041;
}
.rowTwo > ul > li > img {
  vertical-align: middle;
  margin-left: 3px;
  margin-top: -7px;
}
.rowTwo > ul > li > ul {
  /* display: none; */
  position: absolute;
  z-index: 999;
  background: #ee4041;
  margin-left: -60px;
}
.rowTwo > ul > li > ul > li {
  width: 200px;
  text-align: center;
  padding: 15px 0;
}
.rowTwo > ul > li > ul > li:last-child {
  margin-bottom: 30px;
}
.rowTwo > ul > li > ul > li.bgWhite {
  background: #fff;
}
.rowTwo > ul > li > ul > li > a {
  color: #fff;
}
.rowTwo > ul > li > ul > li > a.colorRed {
  color: red;
}
/* 导航悬浮样式类 */
.rowTwo > ul > li > a.hoverBlack {
  color: #404040;
}
.rowTwo > ul > li > a.hoverRed {
  color: #f59292;
}
.rowTwo .buttonGroup {
  float: right;
  margin-top: 10px;
}
.buttonGroup button {
  font-size: 18px;
  color: rgb(34, 34, 34);
}
.rowTwo .buttonGroup > button:nth-child(2) {
  margin-left: 30px;
}
.rowTwo .buttonGroup .black {
  border: 1px solid black;
  color: black;
  background-color: #fff;
  width: 100px;
  height: 40px;
  border-radius: 5px;
}
.rowTwo .buttonGroup .red {
  border: none;
  background-color: #ee4041;
  color: #fff;
  width: 100px;
  height: 40px;
  border-radius: 5px;
}
</style>